<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>完善信息</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        .box-container {
            margin: 15px;
            padding: 0 10px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 10px;
        }

        .box-row {
            position: relative;
            height: 50px;
        }

        .box-row::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgb(212, 212, 212);
            transform: scaleY(0.5);
        }

        .box-row:last-child::after {
            display: none;
        }

        .icon-start {
            width: 10px;
            height: 10px;
            margin-right: 5px;
        }

        .text-title {
            font-size: 15px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .form-text {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .form-text::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .text-placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
            text-align: right;
        }

        .icon-arrow-right {
            width: 17px;
            height: 16px;
            margin-left: 8px;
        }

        .box-tips {
            margin-top: 25px;
            text-align: center;
        }

        .text-tips {
            font-size: 13px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.76);
        }

        .btn {
            margin: 45px auto 0 auto;
            width: 210px;
            height: 46px;
            padding-top: 8px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 0.5);
            line-height: 25px;
        }
    </style>
</head>

<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <div class="box-container" style="padding-top: 10px;">
            <div class="box-row" v-if="type == 1" data-flex="cross:center">
                <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div>
                <div class="text-title">
                    学生姓名
                </div>
                <input type="text" v-model="info.nickName" data-flex-box="1" placeholder="请输入学生姓名" class="form-text"
                    minlength="2" maxlength="15" name="学生姓名">
            </div>
            <div class="box-row" v-if="type == 1" data-flex="cross:center">
                <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div>
                <div class="text-title">
                    家长姓名
                </div>
                <input type="text" v-model="info.relativesName" data-flex-box="1" placeholder="请输入家长姓名"
                    class="form-text" minlength="2" maxlength="15" name="家长姓名">
            </div>
            <div class="box-row" v-if="type == 2" data-flex="cross:center">
                <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div>
                <div class="text-title">
                    教师姓名
                </div>
                <input type="text" v-model="info.nickName" data-flex-box="1" placeholder="请输入教师姓名" class="form-text"
                    minlength="2" maxlength="15" name="教师姓名">
            </div>
            <div class="box-row" data-flex="cross:center" onclick="handlePopSheet(1)">
                <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div>
                <div class="text-title">
                    性别
                </div>
                <input class="form-text" readonly="" type="text" :value="info.gender|genderTxt" data-flex-box="1"
                    placeholder="请选择性别">
                <div class="icon-arrow-right">
                    <img src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
        </div>
        <div class="box-tips">
            <div class="text-tips">
                若找不到所在学校，以下内容可暂时不填
            </div>
        </div>
        <div class="box-container">
            <div class="box-row" data-flex="cross:center" onclick="handlePopSheet(2)">
                <!-- <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div> -->
                <div class="text-title">
                    学校所在地
                </div>
                <input class="form-text" readonly="" type="text" :value="info.schoolAddress" data-flex-box="1"
                    placeholder="请选择学校所在地">
                <div class="icon-arrow-right">
                    <img src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
            <div class="box-row" data-flex="cross:center" onclick="handleSelShool()">
                <!-- <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div> -->
                <div class="text-title">
                    学校
                </div>
                <input class="form-text" readonly="" type="text" :value="info.schoolName" data-flex-box="1"
                    placeholder="请选择学校">
                <div class="icon-arrow-right">
                    <img src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
            <div class="box-row" data-flex="cross:center" onclick="handlePopSheet(3)">
                <!-- <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div> -->
                <div class="text-title">
                    年级
                </div>
                <input class="form-text" readonly="" type="text" :value="info.grades|gradeTxt" data-flex-box="1"
                    placeholder="请选择年级">
                <div class="icon-arrow-right">
                    <img src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
            <div class="box-row" data-flex="cross:center" v-if="type == 1">
                <!-- <div class="icon-start">
                    <img src="../../image/ui/start.png" alt="">
                </div> -->
                <div class="text-title">
                    班级
                </div>
                <input spellcheck="false" type="text" data-flex-box="1" v-model="info.classes" placeholder="请输入班级"
                    class="form-text" minlength="2" maxlength="6" data-type="_chinese" data-verify="true"
                    data-null="true" data-regular="true" name="班级">
            </div>
        </div>
        <div class="btn" @click="confirm()">完成</div>
    </div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    var param;
    var selModel = 0;
    var addressCode = {};
    var sexs = [{ name: '男', id: '1' }, { name: '女', id: '2' }],
        gradeList = [{ name: '一年级', id: '1' }, { name: '二年级', id: '2' }, { name: '三年级', id: '3' }, { name: '四年级', id: '4' }, { name: '五年级', id: '5' }, { name: '六年级', id: '6' }];
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        param = api.pageParam;
        fnInit();
    };

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                // 用户身份 1:学生 2:老师
                // type: param.type,
                type: param.type,
                // 用户ID
                cusId: param.cusId,
                info: {
                    // 用户输入的学生名称
                    nickName: '',
                    // 用户输入的家长名称
                    relativesName: '',
                    // 用户选择的性别
                    gender: '',
                    // 用户选择的学校地址
                    schoolAddress: '',
                    // 用户选择的学校ID
                    schoolId: '',
                    schoolName: '',
                    // 用户选择的年级
                    grades: '',
                    // 用户输入的班级
                    classes: ''
                }
            },
            filters: {
                gradeTxt: function(sender) {
                    var sel = gradeList[sender -1];
                    return sel ? sel.name : '';
                },
                genderTxt: function(sender) {
                    var sel = sexs[sender -1];
                    return sel ? sel.name : '';
                }
            }
        });
        api.addEventListener({
            name: 'select_school'
        }, function (ret) {
            var info = deepCopy(vm.info);
            info.schoolId = ret.value.schoolId;
            info.schoolName = ret.value.schoolName;

            vm.info = info;
        });
    }

    // 选择学校
    function handleSelShool() {
        if (vm.info.schoolAddress.length > 0) {
            fnOpenPublicWin('请选择学校', 'login/select_school', {
                isBtn: true,
                btnName: '确认',
                headerFn: 'handleComfirm',
                addressCode: addressCode
            });
        } else {
            fnToast('请先选择地址');
        }
    }

    // 性别 年级
    function pickerCallback(name, code) {
        var sel = { name: name, code: code };
        var info = deepCopy(vm.info);
        switch (selModel) {
            case '1':
                info.gender = sel.code;
                break;
            case '3':
                info.grades = sel.code;
                break;
        }
        vm.info = info;
    }

    function fnSetArea(provinceCode, cityCode, countyCode, areaName) {
        addressCode.provCode = provinceCode;
        addressCode.cityCode = cityCode;
        addressCode.countryCode = countyCode;
        vm.info.schoolId = '';
        vm.info.schoolName = '';
        var info = deepCopy(vm.info);
        info.schoolAddress = areaName;

        vm.info = info;
    }

    // 选择 1 性别， 2 学校所在地， 3 年级
    function handlePopSheet(type) {
        selModel = type + '';
        if (type != 2) {
            fnOpenFrame({
                name: 'picker',
                url: '../mine/info_layer.html',
                rect: {
                    x: 0, y: 0, w: 'auto', h: 'auto'
                },
                pageParam: {
                    frameName: api.frameName,
                    winName: api.winName,
                    listData: type == 1 ? sexs : gradeList,
                    val: null
                }
            })
        } else {
            fnOpenFrame({
                name: 'address_picker',
                url: '../mine/area_layer.html',
                rect: {
                    x: 0, y: 0, w: 'auto', h: 'auto'
                },
                pageParam: {
                    frameName: api.frameName,
                    winName: api.winName,
                    provinceCode: addressCode.provCode,
                    cityCode: addressCode.cityCode,
                    countyCode: addressCode.countyCode
                }
            })
        }
    }

    // 点击完成
    function confirm() {
        if (isEmpty(vm.info.nickName) || isEmpty(vm.info.gender) || (vm.type == 1 && isEmpty(vm.info.relativesName))) {
            fnOpenAlert({
                alertType: 0,
                btns: 1
            })
        } else {
            $S.ShowProgress();
            var postData = vm.info;
            postData.memberType = vm.type;
            $S.POST('apiTbAppUser/updateUserBasic', postData, function (ret, err) {
                if (ret && ret.status == '200') {
                    fnToast("提交成功");
                    // 告知所有页面用户已登录
                    api.sendEvent({
                        name: 'loginStatus',
                        extra: {
                            login: true,
                        }
                    });
                    api.sendEvent({
                        name: 'updateUserInfo'
                    });
                    api.closeToWin({
                        name: 'main'
                    });
                } else {
                    console.log('提交失败');
                }
                $S.CloseProgress();
            })
        }
    }
</script>

</html>